<template>
    <div id="user-index">
        <div class="header">
            <div class="logo">ZeroSys</div>
            <div class="menu">
                <div class="quit" @click="quitSys">退出</div>
                <div>{{ publicKey }}</div>
            </div>
        </div>

        <el-table :data="appIdList" style="width: 100%">
            <el-table-column label="APPID" prop="appId" />
            <el-table-column label="域名" prop="domainName" />
            <el-table-column align="right">

                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDeleteAppId(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider content-position="right">操作（创建APPID）</el-divider>
        <el-button type="primary" style="float:right;padding:20px;" @click="applyAppIdBoardShow = true">申请APPID</el-button>
        {{ userInfo }}

        <!-- 申请APPID对话框开始 -->
        <el-dialog v-model="applyAppIdBoardShow" title="Tips" width="500" draggable>
            <el-form style="max-width: 800px" label-width="auto" class="demo-ruleForm" :size="'default'" status-icon>
                <el-form-item label="域名">
                    <el-input v-model="domainName" />
                </el-form-item>
                <el-form-item label="签名字符串">
                    <el-input v-model="signatureMessage" maxlength="132" minlength="132" show-word-limit>
                    </el-input>
                </el-form-item>

                <div v-if="usePrivateKeySign">
                    <el-form-item label="私钥">
                        <el-input v-model="privateKey" maxlength="64" minlength="64" show-word-limit>
                            <template #prepend>
                                0x
                            </template>
                        </el-input>
                    </el-form-item>


                    <el-form-item style="float:right;">
                        <el-button type="warning" @click="signDomainName">
                            签名
                        </el-button>
                    </el-form-item>


                </div>

                <el-form-item label="是否使用私钥签名">
                    <el-radio-group v-model="usePrivateKeySign">
                        <el-radio :value="false">否</el-radio>
                        <el-radio :value="true">是</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="applyAppIdBoardShow = false">取消</el-button>
                    <el-button type="primary" @click="applyAppId">
                        申请
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 申请APPID对话框结束 -->
    </div>
</template>

<script setup >
import { ref, onMounted } from "vue"
import { getLocalData } from "../utils/utils"
import { getUserInfo, applyAppIdApi, isLogin, quitSysApi, getAppIdListApi,deleteAppIdApi } from "../network/login"
import { signMessage } from "../utils/web3utils"
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter()

var publicKey = ref("")

// APPID列表
var appIdList = ref([])
// 用户信息
var userInfo = ref({})
// 申请APPID面板
var applyAppIdBoardShow = ref(false)
// 域名
var domainName = ref("")
// 域名签名
var signatureMessage = ref("")
// 私钥
var privateKey = ref("")
// 使用私钥签名
var usePrivateKeySign = ref(false)

const handleDeleteAppId = (index,data)=>{
    var pkId = data.pkId 
    deleteAppIdApi(pkId).then(res=>{
        if(res.code==200){
            getAppIdListApi().then(res => {
                appIdList.value = res.data
            })
        }else{
            ElMessage({
                message:res.message,
                type:"warning"
            })
        }
    })
}

const quitSys = () => {
    quitSysApi().then(res => {
        router.push("/")
    })
}

const signDomainName = () => {
    if (privateKey.value.length == 64) {
        signatureMessage.value = signMessage(domainName.value, privateKey.value)
    } else {
        ElMessage({
            message: "私钥错误",
            type: "warning"
        })
        return
    }
}

const applyAppId = () => {
    applyAppIdApi(domainName.value, signatureMessage.value).then(res => {
        if (res.code == 200) {
            applyAppIdBoardShow.value = false
            ElMessage({
                message: "申请成功",
                type: "success"
            })
            getAppIdListApi().then(res => {
                appIdList.value = res.data
            })

        } else {
            ElMessage({
                message: res.message,
                type: "warning"
            })
        }
    })
}

onMounted(() => {
    getLocalData("publicKey", (pk) => publicKey.value = pk)
    isLogin().then(res => {
        if (res.code == 200) {
            getUserInfo().then(res => {
                userInfo.value = res.data
            })
            getAppIdListApi().then(res => {
                appIdList.value = res.data
            })
        } else {
            router.push("/")
        }
    })

})
</script>

<style scoped>
#user-index {
    width: 100%;
    height: 100vh;
}

#user-index .header {
    height: 60px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-content: center;
    border-bottom: 1px rgba(0, 0, 0, 0.2) solid;
}

#user-index .header .logo {
    color: #409EFF;
    font-size: 30px;
    font-weight: bolder;
    cursor: pointer;
}

#user-index .header .menu {
    height: 60px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

#user-index .header .menu div {
    padding: 20px;
    cursor: pointer;
}

#user-index .header .menu .quit:hover {
    color: #409EFF;
    font-size: large;
}
</style>